<template>
	<div class="personal">
		<Form :model="searchData" inline :label-width="60">
			<FormItem label="姓名:">
                <Input type="text" v-model="searchData.real_name" placeholder="姓名搜索"></Input>
            </FormItem>
			<FormItem label="身份证:">
                <Input type="text" v-model="searchData.ID_card" placeholder="按身份证搜索"></Input>
            </FormItem>
            <FormItem label="手机号:">
            	<Input type="text" v-model="searchData.tel" placeholder="按手机号搜索"></Input>
            </FormItem>
            <Button class="singlebutton" icon="ios-search" :loading="isSearch" type="primary" @click="search">搜索</Button>
		</Form>
		<v-table ref="vTable" :tableColumns="tableColumns" :tableData="tableData" :totalPage="totalPage" :isPage="isPage" @getPage="selectPage"></v-table>
		
	</div>
</template>

<script>
	import vTable from '@/components/common/Table.vue'
	export default {
		components: {
			vTable
		},
		data(){
			return {
				searchData: {
					ID_card: '',
					tel: '',
					real_name: ''
				},
				tableColumns: [
					{ title: '姓名',  key: 'real_name', align: "center" },
                    { title: '性别', key: 'gender', align: "center" },
                    { title: '年龄',  key: 'age', align: "center" },
                    { title: '身高(cm)',  key: 'height', align: "center" },
                    { title: '体重(kg)',  key: 'weight', align: "center" },
                    { title: '手机号',  key: 'tel', align: "center" },
                    { title: '身份证',  key: 'ID_card', align: "center" },
                    { title: '家庭住址',  key: 'address', align: "center" },
                    { title: '录入时间',  key: 'create_time', align: "center" },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px' },
                                    on: {
                                        click: () => {
                                        	this.$router.push({
                                        		path: '/user/personal/edit/' + params.row.customer_id,
                                        		query:  params.row.customer_id
                                        	});
											localStorage.setItem('real_name', params.row.real_name)
											localStorage.setItem('customer_id', params.row.customer_id)
                                        }
                                    }
                                }, '查看')
                            ]);
                        }
                    }
				],
				isSearch: false,
				tableData: [],
				totalPage: 1,
      			isPage: false
			}
		},
		// 初始化数据
		created(){
			this.getData('/customer/list', this.searchData)
		},
		methods:{
			//  获取数据
			getData(url,jsonData){
				this.$http.get(url, jsonData)
				.then(({data})=>{
					console.log(data)
					
					this.tableData = data.data.list.map(e=>{
						//  时间戳转日期
						if(e.create_time !== null) {
							var date = new Date(e.create_time);
							let Y = date.getFullYear() + '-';
							let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
							let D = date.getDate();
							D = D < 10 ? '0' + date.getDate() : D;
							e.create_time = Y + M + D;
							
						}
						return e;
					})
					
					//  分页
					this.totalPage = data.data.total;
					if(this.totalPage > 1) {
						this.isPage = true;
					} else {
						this.isPage = false;
					}
					
					
					if (this.isSearch) {
			        	this.isSearch = false;
			        }
				})
				.catch((err)=>{
					console.log(err);
					this.$Notice.error({ title: "用户信息获取失败！" });
					if (this.isSearch) {
			        	this.isSearch = false;
			        }
				})
			},
			// 搜索
			search(){
				this.isSearch = true;
				this.getData('/customer/list', {
					params: {
						ID_card: this.searchData.ID_card,
						tel: this.searchData.tel,
						real_name: this.searchData.real_name
					}
				})
			},
			// 分页
			selectPage(pageNum){
//				this.getData('/customer/list?'+ 'page=' + pageNum + '&' + 'limit=' + 10)
				this.getData('/customer/list', {
					params: {
						page: pageNum,
						limit: 10
					}
				})
				
			}
		}
	}
</script>

<style lang="less" scoped>

</style>